<template>
  <view class="tabbar-container">
    <view v-for="(item, index) in tabbarList" :key="index" class="tabbar-item" @tap="switchTab(index)">
      <!-- 图标 -->
      <image class="tabbar-icon" :class="{ 'tabbar-icon-center': item.isCenter }"
        :src="(!item.isAction && currentIndex === index) ? item.selectedIconPath : item.iconPath" mode="aspectFit" />
      <!-- 文字 -->
      <text class="tabbar-text" :style="{ color: (!item.isAction && currentIndex === index) ? selectedColor : color }">
        {{ item.text }}
      </text>

      <!-- 消息角标 -->
      <view v-if="item.badge && item.badge > 0" class="tabbar-badge">
        <text class="badge-text">{{ item.badge > 99 ? '99+' : item.badge }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface TabbarItem {
  pagePath: string
  text: string
  iconPath: string
  selectedIconPath: string
  isCenter?: boolean
  isAction?: boolean // 是否为操作按钮（不参与选中状态）
  badge?: number
}

const props = defineProps<{
  current?: number
}>()

const emit = defineEmits<{
  (e: 'change', index: number): void
}>()

// TabBar 配置
const tabbarList = ref<TabbarItem[]>([
  {
    pagePath: '/pages/home/home',
    text: '首页',
    iconPath: '/static/tab/home_gray.png',
    selectedIconPath: '/static/tab/home_black.png'
  },
  {
    pagePath: '/pages/recommend/recommend',
    text: '视频',
    iconPath: '/static/tab/recommend_gray.png',
    selectedIconPath: '/static/tab/recommend_black.png'
  },
  {
    pagePath: '/pages/publish/publish',
    text: '发布',
    iconPath: '/static/tab/圆形添加.png',
    selectedIconPath: '/static/tab/圆形添加.png',
    isCenter: true, // 标记为中间的特殊按钮
    isAction: true // 标记为操作按钮，不参与选中状态
  },
  {
    pagePath: '/pages/message/message',
    text: '消息',
    iconPath: '/static/tab/massage_gray.png',
    selectedIconPath: '/static/tab/massage_black.png',
    badge: 0 // 可以动态设置消息数量
  },
  {
    pagePath: '/pages/profile/profile',
    text: '我的',
    iconPath: '/static/tab/profile_gray.png',
    selectedIconPath: '/static/tab/profile_black.png'
  }
])

// 主题色
const color = ref('#999999')
const selectedColor = ref('#4A90E2')

// 当前选中索引（需要映射，因为发布按钮在中间但不在 TabBar 列表中）
// 实际 TabBar: [0: 首页, 1: 视频, 2: 消息, 3: 我的]
// 显示列表: [0: 首页, 1: 视频, 2: 发布, 3: 消息, 4: 我的]
const currentIndex = computed(() => {
  const current = props.current ?? 0
  // 如果索引 >= 2，需要 +1 跳过发布按钮
  return current >= 2 ? current + 1 : current
})

// 切换 Tab
const switchTab = (index: number) => {
  if (index === currentIndex.value) {
    return
  }

  const item = tabbarList.value[index]

  // 发布页面不切换，而是跳转
  if (index === 2) {
    uni.navigateTo({
      url: item.pagePath
    })
    return
  }

  // 其他页面使用 switchTab
  uni.switchTab({
    url: item.pagePath,
    success: () => {
      emit('change', index)
    }
  })
}

// 设置消息角标
const setMessageBadge = (count: number) => {
  tabbarList.value[3].badge = count
}

// 暴露方法给父组件
defineExpose({
  setMessageBadge
})
</script>

<style scoped>
.tabbar-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #ffffff;
  border-top: 1rpx solid #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 1000;
}

.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 8rpx 0;
}

.tabbar-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 4rpx;
}

/* 中间发布按钮特殊样式 */
.tabbar-icon-center {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 0;
}

.tabbar-text {
  font-size: 20rpx;
  line-height: 1;
}

/* 消息角标 */
.tabbar-badge {
  position: absolute;
  top: 4rpx;
  right: 20%;
  background-color: #ff4444;
  border-radius: 20rpx;
  min-width: 32rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8rpx;
}

.badge-text {
  font-size: 20rpx;
  color: #ffffff;
  line-height: 1;
}
</style>
